<template>
  <main class="am-margin-top">
    <div class="am-g">
      <!-- 筛选面板 -->
      <div class="am-u-sm-12 am-u-md-3">
        <div class="dg-panel am-padding">

          <hr data-am-widget="divider" style="" class="am-divider am-divider-default" />

          <h2>查找地区</h2>

          <form action="" class="am-form am-form-inline">
                <div class="dg_search_pc">
                <div class="dg_search_p">
                  <label>省份</label>
                    <select class="am-form-field" v-model="applyForm.province" >
                      <option></option>
                      <option v-for="(item, index) in provinces" :key="index"
                        :value="item.province.code">{{ item.province.label }}</option>
                    </select>
                  </div>
                  <div class="dg_search_p">
                    <label>城市</label>
                    <select class="am-form-field" v-model="applyForm.city">
                        <option></option>
                      <option v-for="(item, index) in cities" :key="index"
                        :value="item.code">{{ item.label }}</option>
                    </select>
                  </div>
                </div>
                <label>设计师名称</label>
                <div class="am-form-group am-form-icon" >
                  <i class="am-icon-search" style="margin-top: 3px;"></i>
                  <input type="text" class="am-form-field am-radius" v-model="applyForm.designerName"/>
                </div>
                <button class="dg-btn" @click.prevent="checkDesigner()">查询</button>
          </form>
        </div>
      </div>

      <!-- 作者列表 -->
      <div class="am-u-sm-12 am-u-md-9">
        <div class="dg-panel am-padding">
          <ul class="dg-sort am-text-lg">
              <li class="am-margin-horizontal " v-bind:class="[{dgactive:index2==isactive}]"  v-for="(tab,index2) in tabData" :key="index2" @click="DsgListCay(tab.id,index2)">
                {{tab.name}}
                <span class="am-block" v-if="index2 == isactive"></span>
            </li>
          </ul>
        </div>

        <div class="am-margin-top">
          <div class="am-g">
            <div class="am-u-sm-12 am-u-md-4 am-margin-bottom"
              v-for="(dsg, index) in designer" :key="index">
              <div class="dg-panel am-padding-sm">
                <!-- 头像 -->
                <div class="am-inline-block am-margin-right-xs dg-head">
                  <img v-lazy="static_pic+dsg.headImagePath" class="am-img-responsive am-radius" alt="">
                </div>

                <!-- 信息 -->
                <div class="am-inline-block">
                  <h2>{{ dsg.name }}</h2>
                  <div class="dg-text-gray">
                    {{dsg.province}}，{{dsg.city}}
                    <br />
                    作品数：{{dsg.worksNumber}}  
                  </div>
                </div>
              </div>
              
              <!-- 操作 -->
              <div class="dg-footer am-padding-xs" v-if="isShowTel">
                <div class="am-text-center">
                  <button type="button" class="am-btn dg-btn-white" :id="dsg.tel + '-popover'"
                    @click="showTel(dsg.tel)" @blur="closeTel(dsg.tel)">联系电话</button>
                </div>
              </div>
            </div>


            <div class="am-u-end"></div>
          </div>
        </div>
      </div>

      
      <!--分页组件-->
      <div class="am-u-sm-12">
        <v-pagination :total="total" :current-page='current' @pagechange="pagechange" :display="display"></v-pagination>
      </div>
    </div>
  </main>
</template>

<script>
import Vue from 'vue'
import Header from '@/dg_components/DgHeader'
import DgFooter from '@/views2/Footer'// 底部
import pagination from '@/dg_components/pagination'
export default {
  name: 'dsgs-list',
  data() {
    return {
       isactive:0,
        isShowTel:false,
      designer: [],
       tabtype:0,   //Type(全部 or 最新)
        total:0,     // 记录总条数
       display:12,   // 每页显示条数
       current: 1,   // 当前的页数
      applyForm: {// 
        province: '',
        city: '',
        designerName:'',
      },
       provinces: [],
      tabData:[
          {
            id:'0',
            name:'全部'
          },
          {
            id:'1',
            name:'最新'
          }
        ]
    }
  },
  computed: {
    /**省市联动数据 */
    cities() {
      if(this.applyForm.province) {
        this.applyForm.city=''; //初始化 城市编号
        const obj = this.provinces.find(pro => pro.province.code === this.applyForm.province);
        return obj.cities;
      } else {
        return [];
      }
    },
  },
  components: {
    CHeader: Header,
    DgFooter,
    'v-pagination': pagination,
  },
  methods:{
    ready() {
     // console.log(this.$store.state.designer.isAdmin),
       this.loadingPC(),
      this.loadData(),
      this.loadShowTel()
    },
    loadShowTel(){ //登录设计师账号为管理员显示--- 1显示 0不显示
      if(this.$store.state.designer.isAdmin==1){
        this.isShowTel = !this.isShowTel;
      }
    },
    loadData() {
      this.loadDesigners();
    },
    onchangprovinceCity(){
      this.applyForm.city='';
    },
    loadDesigners() {
      return new Promise((resolve, reject) => {
        this.dgpost(this.api.GETDESIGNERPAGED, {
          type:this.tabtype,
          provinceCode:this.applyForm.province,
          cityCode:this.applyForm.city,
          designerName:this.applyForm.designerName,
          gameID:	+this.$store.getters.gameID,
          pageNum:	+this.current,
          numPerPage: +this.display,
        }).then(res => {
         this.designer = res.data.data.designer;
        //console.log("---------"+res.data.data.page.total);
          this.total=res.data.data.page.total;
            if(this.total==0){this.total=1}
        })
      });
    },
     pagechange(currentPage){ // 分页点击
        this.current = currentPage;
       // console.log(this.total+"************");
        this.loadDesigners();
    },
    checkDesigner(){ // 筛选查询
      this.loadDesigners();
    },
     DsgListCay(CarID,inex2){
      this.isactive=CarID;
      this.tabtype = CarID;
      // alert(CarID);
      this.loadDesigners();
      
    },
    showTel(dsgTel){
      // $('#'+ dsgTel + '-popover').popover('open');
      $('#' + dsgTel + '-popover').popover('toggle')
    },
    closeTel(dsgTel) {
      $('#'+ dsgTel + '-popover').popover('close');
    },

     /**加载省市数据 */
    loadingPC() {
      return new Promise((resolve, reject) => {
        this.dgpost(this.api.PROVINCESDATA,{})
        .then(res => {
          this.provinces = res.data.data;
          resolve();
        });
      });
    },
    
  },
  watch: {
    designer(val) {
      this.$nextTick()
      .then(() => {
        $("[id$='-popover']").each(function () {          
          $(this).popover({ content: 'asfdafsdads' });
        })
      });
    }
  },
  mounted() {
    this.ready();
  }
}
</script>

<style lang="less" scoped>
.dg-panel {
  background-color: #FFFFFF;
  border: 1px solid #ECECEC;
  border-radius: 3px;
  ul {
    list-style: none;
  }
}

// AD9677
.dg-sort {
  list-style: none;
  li {
    float: left;
  }
}

.dgactive {
  color: #AD9677;
  span {
    position: relative;
    background-color: #AD9677;
    padding-bottom: 3px;
    bottom: -13px;
  }
}

.dg-head {
  max-width: 80px;
  min-height: 80px;
}

.dg-footer {
  border: 1px solid #ECECEC;
  border-radius: 3px;
  background-color: #FAFAFA;
}

.dg-btn-white {
  color: #CAA87A;
  background-color: #FFFFFF;
  border: 1px solid #E9E9E9;
}
.dg_search_pc{
  select{
      min-width: 60%;
  }
}
.dg_search_p{
  margin-bottom: 10px;
  label{
    width: 27%;
    text-align: center;
  }
}
.dg-btn{
  margin: 10% 0 0 20%;
  text-align: center;
  padding: 5px 20% 5px 20%;
  color: white;
  background-color: #c7ab77;
  border-radius: 5px;
  border-color: #c7ab77;
  font-size: 16px;
  font-weight:bold;
}
</style>
